<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>
<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control *ngIf="isAdmin || isShow">
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let i of companyList; let n = index"
                [nzLabel]="i['company_name']"
                [nzValue]="i['ID']"
                [nzCustomContent]="true"
                ><div style="{{ i['ID'] == company_id ? 'color:#666DD9' : '' }}">{{ i['company_name'] }}</div></nz-option
              >
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select nzShowSearch [(ngModel)]="q.shopId" name="shopId" nzId="shopId" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let shop of shops" [nzLabel]="shop['fordeal_shop_name']" [nzValue]="shop['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shipmentStatus">状态</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.shipmentStatus" name="shipmentStatus" nzId="shipmentStatus" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let statusOption of shipmentStatusOptions"
                [nzLabel]="statusOption['text']"
                [nzValue]="statusOption['index']"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="fulfillmentCenterId">履约中心</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.fulfillmentCenterId" name="fulfillmentCenterId" nzId="fulfillmentCenterId" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" nzValue=""></nz-option>
              <nz-option nzLabel="中国" nzValue="CN"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shipmentId">货件编号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.shipmentId" name="shipmentId" placeholder="请输入" id="shipmentId" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="trackingNo">物流单号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.trackingNo" name="trackingNo" placeholder="请输入" id="trackingNo" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="skuId">Fordeal SKU</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.skuId" name="skuId" placeholder="请输入" id="skuId" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="fulfillmentCenterId">异常件</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.exception" name="exception" nzId="exception" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="是" nzValue="1"></nz-option>
              <nz-option nzLabel="否" nzValue="0"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <!--        <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>-->
      </div>
    </div>
  </form>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-table
    #shipmentTable
    [nzData]="listOfData"
    nzSize="default"
    nzShowPagination
    [nzPageSizeOptions]="[5, 15, 30, 45, 60]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
    [nzShowTotal]="totalTemplate"
  >
    <thead>
      <tr>
        <th nzAlign="center">货件编号</th>
        <th nzAlign="center">货件名称</th>
        <th nzAlign="center">履约中心</th>
        <th nzAlign="center">实际收件｜预计收件</th>
        <th nzAlign="center">入库明细</th>
        <th nzAlign="center">创建时间</th>
        <th nzAlign="center">完结时间</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">处理进度</th>
        <th nzAlign="center">申诉状态</th>
        <th nzAlign="center">所属店铺</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of shipmentTable.data">
        <tr>
          <td class="text-center">
            <p>{{ data['shipmentId'] }}</p>
            <nz-tag *ngFor="let tag of data['formatReceiveTags']" nzColor="red">{{ tag }}</nz-tag>
          </td>
          <td class="text-center">
            <p>{{ data['shipmentName'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['fulfillmentCenterName'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['receivedQuantity'] }} | {{ data['shipQuantity'] }}</p>
          </td>
          <td class="text-center">
            <p>好件：{{ data['normalQuantity'] }}</p>
            <p [class]="data['brokenQuantity'] > 0 ? 'text-red' : ''">坏件：{{ data['brokenQuantity'] }}</p>
            <p [class]="data['unknownQuantity'] > 0 ? 'text-red' : ''">未知件：{{ data['unknownQuantity'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['createdAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
          </td>
          <td class="text-center">
            <p *ngIf="data['shipmentStatus'] == 6">{{ data['closedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
          </td>
          <td class="text-center">
            <p>
              <nz-tag [nzColor]="shipmentStatusOptionTags[data['shipmentStatus']]['color']">
                {{ shipmentStatusOptionTags[data['shipmentStatus']]['text'] }}
              </nz-tag>
            </p>
          </td>
          <td class="text-center">
            <div id="orderUpdateStateBox">
              <div class="orderUpdateStateInfo" style="margin-bottom: 10px" *ngIf="data['shipmentProcess']; else elseTemplate">
                <span
                  title="最后更新：{{ data['shipmentProcess']['lastUpdateUser'] }} {{
                    correctDatetime(data['shipmentProcess']['lastUpdateAt'])
                  }}"
                  >{{ data['shipmentProcess']['lastProcessDate'] }}：{{ data['shipmentProcess']['lastProcessContent'] }}</span
                >
                <span style="color: red" *ngIf="data['shipmentProcess']['updateAtOverTime']"
                  ><br />{{ data['shipmentProcess']['updateAtOverTime'] }}</span
                >
              </div>
              <ng-template #elseTemplate>
                <div class="orderUpdateStateInfo" style="margin-bottom: 10px">
                  <span style="color: red">未跟踪</span>
                </div>
              </ng-template>
              <a nz-button (click)="shipment_process(data['shop_id'], data['shipmentId'], data['planId'])" class="set_purchase">编辑进度</a>
            </div>
          </td>
          <td class="text-center">
            <p *ngIf="data['isAllBoxDisputeFinished']">无需申述</p>
            <p *ngIf="data['disputeOrderList']">申述（{{ data['disputeOrderList']['statusDesc'] }}）</p>
          </td>
          <td class="text-center">{{ shopMap[data['shop_id']] }}</td>
          <td class="text-center"><a nz-button (click)="view(data['shop_id'], data['shipmentId'])">查看详情</a></td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
</nz-card>
